<!--
 * @Author: Hzl
 * @Date: 2021-09-17 14:07:04
 * @LastEditors: Hzl
 * @LastEditTime: 2021-10-12 19:25:16
 * @Description: 封装头部组件
-->
<template>
    <div>
        <!-- 头部 -->
        <!-- {{}} -->
        <div class="header">
            <div class="header_top">
            <!-- 容器居中显示 -->
                <div class="wrapper">
                    <div class="left">太工新闻网
                        <ul class="left_head">
                            <a href="" @click.prevent="">怀旧版</a>
                            <a href="" @click.prevent="">办公系统</a>
                            <a href="" @click.prevent="">教务系统</a>
                            <a href="" @click.prevent="">网络应用</a>
                            <a href="" @click.prevent="">信息公开</a>
                            <a href="" @click.prevent="">院长信箱</a>
                            <a href="" @click.prevent="">书记信箱</a>
                        </ul>
                    </div>
                    <div class="right">
                        <el-input class="find" v-model="input" placeholder="请输入内容"></el-input>
                        <el-button class="search" type="primary" icon="el-icon-search">搜索</el-button>
                    </div>
                </div>
            </div>
            <div class="header_mian">
                <div class="wrapper">
                    <div class="logo" @click="toHome">
                        <img src="../assets/resource/img/logo.png" alt="">
                    </div>
                    <ul>
                        <li :class='$route.query.name===item.name?"current":""' v-for="item in category" @click="toJump(item)" :key="item.id">{{item.name}}</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- /头部 -->
    
    
    </div>
</template>

<script>
import {get} from '../utils/request';
export default {
    data(){
        return{
            category:[],
            input: ''
        };
    },
    created(){
        this.loadCategory();
    },
    //方法 事件处理程序
    methods:{
        toHome(){
            //跳转到主页
            this.$router.push({
                path:"/Home"
            })
        },
        ///跳转
        toJump(item){
            //跳转到list页面 编程式路由导航
            // alert(JSON.stringify(item))
                this.$router.push({
                    path:"/list",
                    query:item
                });
        },
        //所有的路径都要写在方法中
        //加载所有栏目
        loadCategory(){
            let url='/index/category/findAll'
            get(url).then(res =>{
                this.category = res.data;
            });
        },
    }
}
</script>

<style lang="scss">
    //头部样式
    .header{
        .header_top{
        
        background-color: #0857b8;
        color: white;
        & > .wrapper::after{
        display: block;
        content: '';
        clear: both;
        }
        .left,.right{
        line-height: 3em;
        }
        .left{
        float: left;
        font-size: 20px;
        color: #00f5fd;
        font-weight: bold;
            ul{
                float: right;
                margin-left: 150px;
                a{
                    line-height: 24px;
                    color: #fff;
                    font-size: 14px;
                    padding: 0 18px;
                    border-right: 1px solid #fff;
                    text-decoration: none;
                }
            }
        }
        .right{
            height: 60px;
            float: right;
            margin-top: 10px;
        // width: 325px;
            .find{
                width: 250px;
                height: 28px;
                
            }
            .search{
                background-color: #0857b8;
                border-radius: 10px;
                border: #076ae4 1px solid;
            }
        }
    }
    .header_mian{
        background-color: #194f91;
        & > .wrapper{
        display: flex;
        justify-content: space-between;
        position: relative;
        ul{
            position: absolute;
            bottom: 0px;
            right: 0px;
            li{
            float: left;
            padding: .8em;
            color: #ffffff;
            }
            li:hover{
            background-color: #0971d1;
            color: rgb(255,255,255);
            cursor: pointer;
            }
            li.current{
                background-color: #0971d1;
                color: rgb(255,255,255);
                cursor: pointer;
            }
        }
        }
        .logo{
            cursor: pointer;
        img{
            height: 50px;
        }
        }
    }
    }

</style>